<template>
  <div class="model-option-container" :style="{display: visible ? 'block' : 'none'}">
    <div class="closebg" @click="closeForm"></div>
    <div class="model-box animate__animated animate__fadeIn" :style="modelPosition" ref="modelBox" id="modelBox">
      <div class="model-list">
        <div class="model-cell" v-for="(item, index) in modelList" :key="index" :data-index="index">
          <p class="model-title" :data-index="index">{{item.name}}</p>
          <div class="cell-list">
            <el-tag v-for="cell in item.matterItems"  @click.stop="chooseItem(cell)" :key="cell.id" size="small" style="margin-right:10px;margin-bottom:10px">{{cell.name}}</el-tag>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nextTick, ref, toRefs, watch, onMounted, computed } from 'vue'
import { homeApi } from "/@/api/home/index";
export default {
  name: 'ModelOptionBox',
  props: {
    dialogModelVisible: {
      type: Boolean,
      default: false
    },
    type: {
      type: [Number, String],
      default: null
    },
    valueData: {
      type: Array,
      default: null
    },
  },
  setup(props, context) {
    const homeCalendar = homeApi();
    const { dialogModelVisible, type } = toRefs(props)
    let visible = ref(dialogModelVisible.value)
    let modelBox = ref(null)
    let modelPosition = ref({
      top: `unset`,
      left: `unset`,
      bottom: `unset`,
      right: `unset`,
      position: `absolute`
    })
     // 常用/非常用 类型
    const modelType = computed(() => {
      return type.value
    })
    let modelList = ref([])
    watch(() => dialogModelVisible.value,
        (oldVal, newVal) => {
          visible.value = newVal || oldVal
          nextTick(() => {
            setPosition()
            if(visible.value){
              window.onmousewheel = null;
            }
            getList()
          })
        }
    )
    const closeForm = () => {
      visible.value = false
      context.emit('closeForm', true)
    }
    const setPosition = () => {
      if(!document.getElementById('timeRef')) return
      const { offsetHeight, offsetTop, offsetLeft, offsetWidth, dataset } = document.getElementById('timeRef')
      const windowX = document.querySelector('.ssal-calendar').clientWidth
      let windowY = 0
      let scrollTop = 0
      if(dataset.type == 'scroll') {
          scrollTop = document.querySelectorAll('.content-wrapper')[0].scrollTop
          windowY = document.querySelectorAll('.scroll-container')[0].clientHeight
      }else{
          windowY = document.querySelector('.ssal-calendar').clientHeight
      }
      const release = windowX - offsetLeft - offsetWidth
      const height = 241
      const releaseY = windowY - offsetHeight - offsetTop - scrollTop
      if(release < 250){
        modelPosition.value.left = `unset`
        if(dataset.view == 'day') {
          modelPosition.value.right = `40%`
        }else{
          modelPosition.value.right = `${release + offsetWidth}px`
        }
      }else{
        modelPosition.value.left = `${offsetLeft + offsetWidth}px`
        modelPosition.value.right = `unset`
      }
      if(releaseY < height) {
        modelPosition.value.top = `unset`
        if(dataset.type == 'scroll'){
          modelPosition.value.bottom = `${windowY - offsetTop}px`
        }else{
          modelPosition.value.bottom = `${releaseY - 74}px`
        }
      }else{
        if(dataset.type == 'scroll') {
          if(dataset.header == 'header') {
            modelPosition.value.top = `0px`
          }else{
            modelPosition.value.top = `${offsetTop + offsetHeight}px`
          }
        }else{
          modelPosition.value.top = `${offsetTop + offsetHeight}px`
        }
        modelPosition.value.bottom = `unset`
      }
      // 在下面有滚动视图的地方展示modeloption的定位; 如周视图页面的点击
      if(modelType.value == 'header') {
        modelPosition.value.top = `122px`
        modelPosition.value.position = 'fixed'
        modelPosition.value.left = `unset`
        modelPosition.value.right = `calc(10px + ${(6 - dataset.day) * offsetWidth}px)`
      }else{
        modelPosition.value.position = 'absolute'
      }
    }
    // 选择item
    const chooseItem = item => {
      context.emit('getQuick', item);
      closeForm()
    }
    // 事项列表
    const getList = () => {
      if(modelList.value.length > 0) return 
       homeCalendar.getMatterItems().then((res) => {
        if (res.code === 0) {
          // let arr = []
          // res.data.forEach(e => {
          //   if(e.matterItems){
          //     e.matterItems.forEach(item => {
          //       arr.push({
          //         name: item.name,
          //         code: item.code
          //       })
          //     })
          //   }
          // })
          // console.log(JSON.stringify(arr))
          modelList.value = res.data;
        } 
      });
    }
    onMounted(() => {
      document.addEventListener('keydown', (event) => {
        if(event.code == 'Escape'){
          closeForm()
        }
      })
    })
    return {
      modelPosition,
      closeForm,
      visible,
      modelBox,
      modelList,
      chooseItem
    }
  }
}
</script>

<style scoped lang="scss">
.model-option-container{
  .closebg{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
  }
  .model-box{
    background: #fff;
    opacity: .8;
    // padding: 12px 0;
    position: absolute;
    z-index: 1002;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    width: 250px;
    border-radius: 4px;
    box-sizing: border-box;
    .model-title-box{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      border-bottom: 1px solid var(--ss-color-primary-light);
      padding-bottom: 10px;
      .model-title{
        font-size: 16px;
        color: var(--ss-color-text-black);
      }
      .close-btn{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        cursor: pointer;
      }
    }
    .model-list{
      padding: 10px 12px 0;
      max-height: 400px;
      overflow: auto;
      .model-cell{
        cursor: pointer;
        padding-bottom: 10px;
        .model-title{
          font-size: 14px;
          font-weight: bold;
        }
        .cell-list{
          margin-top: 5px;
        }
      }
    }
  }
}
</style>